<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 3D万花筒相册旋转效果 - 源码之家</title>

    <style type="text/css">
        *{margin:0;padding: 0;}
        .pic{
            width: 120px;
            height: 180px;
            margin: 150px auto 0;
            position: relative;
            /*transform 旋转元素*/
            transform-style:preserve-3d;
            transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
        }
        body{background-color: #66677c;overflow:hidden;}

        .pic img{
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 0px 0px 10px #fff;
            /*倒影的设置*/
            -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);
        }
        .pic p{
            width: 1200px;
            height: 1200px;
            background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));
            position: absolute;
            top:100%;left:50%;
            margin-top: -600px;
            margin-left: -600px;
            border-radius:600px;
            transform:rotateX(90deg);
        }
        .index{
            position:absolute;
            left:48%;
            top:90%;
            z-index:1000;
        }
    </style>

</head>
<body>

<div class="pic">
    <img src="public/1.jpg"/>
    <img src="public/2.jpg"/>
    <img src="public/3.jpg"/>
    <img src="public/4.jpg"/>
    <img src="public/5.png"/>
    <img src="public/6.jpg"/>
    <img src="public/7.jpg"/>
    <img src="public/8.jpg"/>
    <p></p>
</div>

<script src="bootstrap/js/jquery.js"></script>
<script type="text/javascript">
    $(function(){

        var imgL=$(".pic img").size();
        var deg=360/imgL;
        var roY=0,roX=-10;
        var xN=0,yN=0;
        var play=null;

        $(".pic img").each(function(i){
            $(this).css({
                <!--translateZ 定义2d旋转沿着z轴-->
                "transform":"rotateY("+i*deg+"deg) translateZ(300px)"	});
            <!--防止图片被拖拽-->
            $(this).attr('ondragstart','return false');
        });

        $(document).mousedown(function(ev){
            var x_=ev.clientX;
            var y_=ev.clientY;
            clearInterval(play);
            console.log('我按下了');
            $(this).bind('mousemove',function(ev){
                /*获取当前鼠标的坐标*/
                var x=ev.clientX;
                var y=ev.clientY;
                /*两次坐标之间的距离*/
                xN=x-x_;
                yN=y-y_;

                roY+=xN*0.2;
                roX-=yN*0.1;
                //console.log('移动');
                //$('body').append('<div style="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');

                $('.pic').css({
                    transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'
                });
                /*之前的鼠标坐标*/
                x_=ev.clientX;
                y_=ev.clientY;

            });
        }).mouseup(function(){
            $(this).unbind('mousemove');
            var play=setInterval(function(){

                xN*=0.95;
                yN*=0.95;
                if(Math.abs(xN)<1 && Math.abs(yN)<1){
                    clearInterval(play);
                }
                roY+=xN*0.2;
                roX-=yN*0.1;
                $('.pic').css({
                    transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'
                });

            },30);

        });

    });
</script>
<div class="index">
    <p><a href="index.html" target="_blank">返回主页</a></p>
</div>
</body>
</html>